<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport" content=" initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="{$Think.config.RESOURCEURL}wx_assets/css/common.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <link href="{$Think.config.RESOURCEURL}wx_assets/dist/gmu.css{$Think.config.RESOURCE_VER}" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.1.1.3.min.js{$Think.config.RESOURCE_VER}"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/dist/gmu.min.js{$Think.config.RESOURCE_VER}"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.alert.js{$Think.config.RESOURCE_VER}"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/js/util.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/personCenter/js/mediaQuery.min.js{$Think.config.RESOURCE_VER}"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/wx_share.js{$Think.config.RESOURCE_VER}"></script>
    <title>{$systemName}</title>
    <style>
        @font-face {
            font-family: 'iconfont';  /* project id 201523 */
            src: url('//at.alicdn.com/t/font_mt5t7yq3434n29.eot');
            src: url('//at.alicdn.com/t/font_mt5t7yq3434n29.eot?#iefix') format('embedded-opentype'),
            url('//at.alicdn.com/t/font_mt5t7yq3434n29.woff') format('woff'),
            url('//at.alicdn.com/t/font_mt5t7yq3434n29.ttf') format('truetype'),
            url('//at.alicdn.com/t/font_mt5t7yq3434n29.svg#iconfont') format('svg');
        }
        .iconfont{
            font-family:iconfont;
        }
        body{
            background-color:#F0EFF4;
        }
        ul{
            padding:5px;
        }
        ul>li{
            background-color: #F3F1F1;
            border-radius: 4px;
            border: 10px solid white;
            margin: 10px 0;
        }
        ul>li>.storeBack{
            background-color: #F3F1F1;
            position: relative;
            box-sizing: border-box;
            height: 2.84rem;
            overflow: hidden;
        }
        ul>li>.storeBack>img{
            max-width: 100%;
            top: 50%;
            transform: translate(0,-50%);
            -webkit-transform: translate(0,-50%);
            position: absolute;
        }
        ul>li>h1{
            font-size: 14px;
            color: #333333;
            padding:3px 10px;
            line-height: 30px;
        }

        ul>li>h1>i{
            float: right;
            color: #1BACFD;
            font-size: 24px;
        }
        ul>li>.storeBack>i.share{
            position: absolute;
            top: 50%;
            border: 1px solid white;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            line-height:40px;
            text-align: center;
            font-size: 32px;
            color: white;
            left: 50%;
            transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
        }
        ul>li>.addStore{
            background-color: #F3F1F1;
            position: relative;
            box-sizing: border-box;
            height: 3.34rem;
            overflow: hidden;
        }
        ul>li>.addStore>div{
            position: absolute;
            top: 50%;
            width: 100%;
            transform: translate(0,-50%);
            -webkit-transform: translate(0,-50%);
        }
        ul>li>.addStore .plus{
            width: 2.77rem;
            height: 1.56rem;
            position: relative;
            border: 1px solid #ccc;
            margin: 0 auto;
            background-color: white;
            margin-bottom: 5px;
        }
        ul>li>.addStore .plus:before{
            content: "";
            height: 37px;
            position: absolute;
            top: 50%;
            display: block;
            border-right: 3px solid #ccc;
            left: 50%;
            transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
        }
        ul>li>.addStore .plus:after{
            content: "";
            width: 37px;
            position: absolute;
            top: 50%;
            display: block;
            border-top: 3px solid #ccc;
            left: 50%;
            transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
        }
        ul>li>.addStore h1{
            color:#333;
            font-size:14px;
            text-align: center;
            width:100%;
            line-height:22px;
        }
        ul>li>.addStore h2{
            color:#ABA8A8;
            font-size:12px;
            text-align: center;
            width:100%;
        }
        ul>li>.addStore h2>span{
            color:#1CACFF;
        }
        .data-loading,.data-end,.rDialog{
            font-size:14px;
        }
    </style>
</head>
<body>
    <ul id="storeList">
        <li>
            <div class="addStore">
                <div>
                    <div class="plus"></div>
                    <h1>点击添加自提点</h1>
                    <h2>还可以添加<span>{$storeCount}</span>个</h2>
                </div>
            </div>
        </li>
    </ul>
</body>
<script type="text/html" id="Tpl">
    <%if(results){
        for(var i=0;i<results.length;i++){
            var store = results[i];
    %>
    <li data-id="<%=store.id%>">
        <div class="storeBack" onclick="store.revise(<%=store.id%>)">
            <img src="<%=store.picUrl%>"/>
        </div>
        <h1 onclick="store.detail(<%=store.id%>)"><%=store.name%> <i class="share iconfont">&#xe60b;</i></h1>
    </li>
    <%}}%>
</script>
<script>
    var baseUrl = '{$Think.config.SERVER_HOST}';
    var hrefPath = baseUrl+'call.html?customerId={$customerId}';
    var store= {
        pageSize:10,
        page:0,
        pageCount:0,
        init:function(){
            this._initEvent();
            $.util.pageLoading.show();
            this._loadList(this.page,function(){
                $.util.pageLoading.hide();
            });
        },
        _initEvent:function(){
            var me=this;
            $.util.initDataLoading({
                me:store,
                lastChildren:function(){
                    return $("#storeList li:last");
                },
                page:function(){
                    return store.page;
                },
                pageCount:function(){
                    return store.pageCount;
                }
            });
            $(".addStore").click(function(){
                var count = $(this).find('span').text();
                if(count<=0){
                    $.util.alert("可添加的自提点数量不足!");
                    return;
                }
                location.href = '{$Think.config.SERVER_HOST}call.html?customerId={$customerId}&module=merchant&method=getStoreById';
            });
        },
        revise:function(id){
            location.href = '{$Think.config.SERVER_HOST}call.html?customerId={$customerId}&module=merchant&method=getStoreById&params=%7B%22id%22:'+id+'%7D';
        },
        detail:function(id){
            location.href = '{$Think.config.SERVER_HOST}call.html?customerId={$customerId}&module=store&method=getStoreDetail&params=%7B%22id%22:'+id+'%7D';
        },
        _renderList:function(data,page,callback){
            var me=this;
            if(data){
                var html=template("Tpl", data),
                        container = $(".addStore").parents("li");
                container.before(html);
                me.page=page;
                me.pageCount=Math.ceil(data.total/me.pageSize);
                callback && callback();
            }
        },
        _loadList:function(page,callback){
            var me=this;
            $.req.get("call.json?module=merchant&customerId={$customerId}&method=getStoreList",{
                params: {
                    "vid":'{$vid}',
                    "start":page,
                    "limit":me.pageSize}
            },function(data){
                if(data){
                    me._renderList(data,page,callback);
                }
            });
        }
    };

    store.init();
</script>
<script>
    wx_share.init({
        "pkg":{
            "appId": '{$pkg.appId}',
            "timestamp": '{$pkg.timestamp}',
            "nonceStr": '{$pkg.nonceStr}',
            "signature": '{$pkg.signature}'
        },
        hide:1
    });
</script>
</html>